<template>
  <div :id="chartId" :style="{height:height,width:width}" />
</template>

<script>

export default {
  props: {
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '100%'
    },
    mydata:null,
    bigtitle:{
        type: Number,
        default: 0
    },
    unit:{
        type: Number,
        default: 0
    },
    chartId:{
        type: String,
    },
    pienum:{
      type: Number,
      default: 4
    }
  },
  data() {
    return {
        chart: null,
        colorPalette : [
            '#2ec7c9','#b6a2de','#5ab1ef','#ffb980','#d87a80',
            '#8d98b3','#e5cf0d','#97b552','#95706d','#dc69aa',
            '#07a2a4','#9a7fd1','#588dd5','#f5994e','#c05050',
            '#59678c','#c9ab00','#7eb00a','#6f5553','#c14089'
        ],
        bigtitlelist:[
            '广\n铁\n集\n团\n单\n身\n公\n寓',
            '人\n员\n入\n住\n信\n息',
            '房\n源\n信\n息',
            '人\n员\n信\n息'
        ],
        unitlist: [
            '间','人'
        ],

    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
        this.chart = this.$echarts.init(document.getElementById(this.chartId))
        // let mydata=[
        //     ['product', '总房数', '已入住', '可分配', '维修中'],
        //     ['广州', 86, 92, 85, 83],
        //     ['长沙', 24, 67, 79, 86],
        //     ['怀化', 41, 30, 65, 53],
        //     ['惠州', 24, 67, 79, 86],
        //     ['海口', 55, 67, 69, 72]
        // ]

        let culsum = new Array(this.mydata[0].length - 1).fill(0);
        for(let j=0;j < this.mydata[0].length - 1; j++){
            for(let i = 1;i < this.mydata.length; i++){
                culsum[j] += this.mydata[i][j+1];
            }
        }
        let option = null;
        if(this.pienum === 4){
            option = {
                color: this.colorPalette,
                title: [
                    {
                        subtext:'单位（' + this.unitlist[this.unit] + '）',
                        subtextStyle: {
                            color: '#555', // 副标题文字颜色,
                            fontWeight: 'bolder',
                            fontSize: 16,
                        },
                        x: 'left',
                        y: 'center',
                        backgroundColor: 'rgba(0,0,0,0)',
                        borderColor: '#ccc',
                        padding: 5,
                        left:5,
                        text: this.bigtitlelist[this.bigtitle],
                        textStyle: {
                            fontSize: 24,
                            fontWeight: 'bolder',
                            color: '#333' // 主标题文字颜色
                        }
                    },
                    {
                        text: this.mydata[0][1] + '(' + culsum[0] + ')',
                        left: '40%',
                        top: '10%',
                        textAlign: 'center'

                    },
                    {
                        left: '80%',
                        top: '10%',
                        text: this.mydata[0][2] + '(' + culsum[1] + ')',
                        textAlign: 'center'
                    },
                    {
                        left: '40%',
                        top: '50%',
                        text: this.mydata[0][3] + '('+ culsum[2] + ')',
                        textAlign: 'center'
                    },
                    {
                        left: '80%',
                        top: '50%',
                        text: this.mydata[0][4] + '(' + culsum[3] + ')',
                        textAlign: 'center'
                    },
                ],
                legend: {
                    orient: 'vertical',
                    x: 'left',
                    y: 'center',
                    left:50,
                },
                tooltip: {},
                dataset: {
                    source: this.mydata
                },
                series: [
                    {
                        name: this.mydata[0][1],
                        type: 'pie',
                        radius: '20%',
                        center: ['40%', '30%'],
                        encode: {
                            itemName: 'product',
                            value: this.mydata[0][1] ,
                        },
                    },
                    {
                        name: this.mydata[0][2],
                        type: 'pie',
                        radius: '20%',
                        center: ['80%', '30%'],
                        encode: {
                            itemName: 'product',
                            value: this.mydata[0][2]
                        }
                    },
                    {
                        name: this.mydata[0][3],
                        type: 'pie',
                        radius: '20%',
                        center: ['40%', '70%'],
                        encode: {
                            itemName: 'product',
                            value: this.mydata[0][3] ,
                        },


                    },
                    {
                        name: this.mydata[0][4],
                        type: 'pie',
                        radius: '20%',
                        center: ['80%', '70%'],
                        encode: {
                            itemName: 'product',
                            value: this.mydata[0][4]
                        }
                    }
                ]
            };
        }
        else if(this.pienum === 3){
            option = {
                color: this.colorPalette,
                title: [
                    {
                        subtext:'单位（' + this.unitlist[this.unit] + '）',
                        subtextStyle: {
                            color: '#555', // 副标题文字颜色,
                            fontWeight: 'bolder',
                            fontSize: 16,
                        },
                        x: 'left',
                        y: 'center',
                        backgroundColor: 'rgba(0,0,0,0)',
                        borderColor: '#ccc',
                        padding: 5,
                        left:5,
                        text: this.bigtitlelist[this.bigtitle],
                        textStyle: {
                            fontSize: 24,
                            fontWeight: 'bolder',
                            color: '#333' // 主标题文字颜色
                        }
                    },
                    {
                        text: this.mydata[0][1] + '(' + culsum[0] + ')',
                        left: '27%',
                        top: '10%',
                        textAlign: 'center'

                    },
                    {
                        left: '54%',
                        top: '10%',
                        text: this.mydata[0][2] + '(' + culsum[1] + ')',
                        textAlign: 'center'
                    },
                    {
                        left: '81%',
                        top: '10%',
                        text: this.mydata[0][3] + '('+ culsum[2] + ')',
                        textAlign: 'center'
                    },
                ],
                legend: {
                    orient: 'vertical',
                    x: 'left',
                    y: 'center',
                    left:50,
                },
                tooltip: {},
                dataset: {
                    source: this.mydata
                },
                series: [
                    {
                        name: this.mydata[0][1],
                        type: 'pie',
                        radius: '30%',
                        center: ['27%', '50%'],
                        encode: {
                            itemName: 'product',
                            value: this.mydata[0][1] ,
                        },
                    },
                    {
                        name: this.mydata[0][2],
                        type: 'pie',
                        radius: '30%',
                        center: ['54%', '50%'],
                        encode: {
                            itemName: 'product',
                            value: this.mydata[0][2]
                        }
                    },
                    {
                        name: this.mydata[0][3],
                        type: 'pie',
                        radius: '30%',
                        center: ['81%', '50%'],
                        encode: {
                            itemName: 'product',
                            value: this.mydata[0][3] ,
                        },

                    },
                ]
            };

        }

        this.chart.setOption(option)
    }
  }
}
</script>
